<template>
  <div class="common">
      <a-row :gutter="15">
        <a-col
          :sm="24"
          :md="12"
          :xl="5"
          @click="goto"
          :style="{ marginBottom: '24px'}">
          <common-card
            :loading="loading"
            bgcolor="rgb(83,200,255)"
            title="总存栏数"
            content="5555">
            <img src="@/assets/home/柱状图.png" slot="commonImage"/>
            <div slot="commonOthers">总资产：30000</div>
          </common-card>
        </a-col>
        <a-col
          :sm="24"
          :md="12"
          :xl="5"
          :style="{ marginBottom: '24px'}">
          <common-card
            :loading="loading"
            bgcolor="rgb(250,208,73)"
            title="牧场总数"
            content="3">
            <img src="@/assets/home/扇形图.png" slot="commonImage"/>
            <div slot="commonOthers">育肥场数：2</div>
            <div slot="commonOthers">繁育场数：1</div>
          </common-card>
        </a-col>
        <a-col
          :sm="24"
          :md="12"
          :xl="5"
          :style="{ marginBottom: '24px'}">
          <common-card
            :loading="loading"
            bgcolor="rgb(254,96,98)"
            title="今日入场数"
            content="100">
            <img src="@/assets/home/箭头右.png" slot="commonImage"/>
            <div slot="commonOthers">昨日入场数：30000</div>
            <div slot="commonOthers">上月入场数：30000</div>
          </common-card>
        </a-col>
        <a-col
          :sm="24"
          :md="12"
          :xl="5"
          :style="{ marginBottom: '24px'}">
          <common-card
            :loading="loading"
            bgcolor="rgb(100,200,200)"
            title="今日离场数"
            content="100">
            <img src="@/assets/home/箭头右.png" slot="commonImage"/>
            <div slot="commonOthers">昨日离场数：30000</div>
            <div slot="commonOthers">上月离场数：30000</div>
          </common-card>
        </a-col>
        <a-col
          :sm="24"
          :md="12"
          :xl="5"
          :style="{ marginBottom: '24px'}">
          <common-card
            :loading="loading"
            bgcolor="rgb(200,100,200)"
            title="用户数"
            content="5">
            <img src="@/assets/home/人.png" slot="commonImage"/>
          </common-card>
        </a-col>
      </a-row>
    </div>
</template>
<script>
import CommonCard from '@/components/card/CommonCard'
export default {
  name: "Common",
  components:{ CommonCard },
  props: {
    loading: {
      type: Boolean
    }
  },
  data () {
    return {
    };
  },
  methods:{
    goto(){
      this.$router.push('/ichm/ChmBizCattleBasicInfoList')
    },
  }
}
</script>
<style lang="less" scoped>
  .common{
    // padding-left: 3%;
    img {
      vertical-align: middle;
      width: 75%;
      margin-left: 10px;
      margin-top: 10px;
    }
  }
</style>
<style>
.ant-col-xl-5 {
  width: 20%;
}
</style>